```jsx
import * as popover from "@zag-js/popover"
import { normalizeProps, useMachine } from "@zag-js/solid"
import { createMemo, createUniqueId } from "solid-js"

export function Popover() {
  const service = useMachine(popover.machine, { id: createUniqueId() })

  const api = createMemo(() => popover.connect(service, normalizeProps))

  return (
    <div>
      <button {...api().getTriggerProps()}>Click me</button>
      <div {...api().getPositionerProps()}>
        <div {...api().getContentProps()}>
          <div {...api().getTitleProps()}>Popover Title</div>
          <div {...api().getDescriptionProps()}>Description</div>
          <button {...api().getCloseTriggerProps()}>X</button>
        </div>
      </div>
    </div>
  )
}
```
